Radix Icons – 15×15 開源圖標 Icons 免費下載，支援 Sketch、Figma 與 SVG 檔案格式

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Gemini Grok

Radix Icons 是 WorkOS 團隊維護的一套免費開源圖標集，全部基於 15×15 像素網格設計，收錄 300+ 個 UI 圖標，原生支援 React 元件化使用，採 MIT License 可商用，是目前與 Radix UI 及 shadcn/ui 搭配最契合的圖標方案。

在尋找合適的免費開源圖標庫時，設計師和開發者經常面臨選擇困難。Feather Icons 主打簡約線條風格，Remix Icon 以 2000+ 的龐大數量取勝，Heroicons 則是 Tailwind CSS 官方推薦的方案。Radix Icons 選擇了一條不同的路線，用 15×15 的超小尺寸和高度一致的設計語言，在 UI 元件層級提供了極度精煉的視覺方案。如果你正在建立一套設計系統，或者需要一組輕量且統一的圖標，Radix Icons 值得認真考慮。

網站名稱：Radix Icons
官方網站：https://icons.modulz.app/
授權方式：MIT License（可商用免費）
圖標數量：300+
npm 套件：@radix-ui/react-icons（最新版本 1.3.2）
支援格式：SVG、Figma、Sketch、IconJar、npm

Radix Icons 是什麼？

Radix Icons 的核心定位很明確：為 Radix UI 生態系提供一套統一的視覺語言。這套圖標集最早由 Modulz 團隊設計，Modulz 後來被 WorkOS 收購，目前 Radix Icons 的原始碼託管在 GitHub（radix-ui/icons），由 WorkOS 團隊持續維護。截至 2026 年 5 月，npm 套件 @radix-ui/react-icons 的每月下載量超過 1,600 萬次，GitHub 星數超過 2,600，在 React 開發圈有相當高的採用率。

所有圖標都基於 15×15 的像素網格繪製，線條粗細、圓角大小、間距比例全部統一。這意味著在同一個介面中使用多個 Radix 圖標時，它們的視覺重量完全一致，不會出現某個圖標看起來比其他圖標「重」或「輕」的問題。對於追求設計一致性的團隊來說，這個特性非常實用。

與 Radix UI 生態系的關聯

Radix UI Primitives 提供了一系列無樣式（unstyled）的 React 元件，如 Dialog、Dropdown、Tooltip 等，讓開發者自由打造符合品牌風格的 UI。許多知名的開源設計系統（例如 shadcn/ui）底層都採用了 Radix UI 的無障礙元件。Radix Icons 正是這個生態系的視覺補充，當你在使用 Tabler Icons 或 CSS.GG 等其他開源圖標時，可能會發現風格與 Radix UI 的極簡設計語言不夠契合，這時候 Radix Icons 就是最佳選擇。

Radix Icons 核心特色與圖標分類

截至 2026 年 5 月，Radix Icons 收錄超過 300 個圖標。數量上不及 Remix Icon 的 2000+ 或 Ionicons 的 1200+，但它的優勢在於每個圖標都經過精心設計，確保在 15×15 的有限空間內仍然清晰可辨。圖標涵蓋以下主要分類：

• 箭頭與導航（ArrowLeft、ArrowRight、ChevronDown、CrossCircled 等）
• 操作按鈕（Plus、Minus、Trash、Pencil、Copy 等）
• 表單元素（Check、Checkbox、RadioButton、Toggle 等）
• 狀態指示（InfoCircled、ExclamationTriangle、CheckCircled 等）
• 社交與品牌（GitHubLogo、TwitterLogo、LinkedInLogo 等）
• 排版工具（AlignLeft、AlignCenter、Bold、Italic 等）

從設計風格來看，Radix Icons 採用線條（outline）為主的繪製方式，部分圖標同時提供填充（filled）變體。與 IconPark 提供的多種主題切換不同，Radix Icons 專注於一種風格做到極致。15×15 的尺寸恰好適合在緊湊的 UI 元件中使用，例如工具列按鈕、表格操作欄、下拉選單等場景。

在格式支援方面，Radix Icons 提供五種輸出方式：純 SVG 檔案、Figma 檔案、Sketch 檔案、IconJar 檔案，以及 npm 套件。其中 npm 的支援讓每個圖標可以作為獨立的 React 元件使用，比起 Simple Icons 需要手動複製 SVG 程式碼，Radix Icons 的元件化使用方式更加方便。

下載與安裝方式

取得 Radix Icons 的方式非常多元，你可以根據自己的使用場景選擇最適合的管道。

從官方網站下載

進入 Radix Icons 官方網站 後，頁面右上方有一排下載按鈕，可以根據你使用的工具選擇對應格式。網站提供 Figma、Sketch、IconJar、SVG 四種格式的完整圖標包，一鍵下載即可取得全部圖標。如果你只需要單獨幾個圖標，也可以在網站上直接點擊圖標，系統會自動複製該圖標的 SVG 程式碼到剪貼簿。這個功能和 IcoMoon App 的操作邏輯類似，但 Radix Icons 更為直覺，不需要額外設定。

官方網站還有一個實用功能：點擊左上角的太陽圖示，可以將整個網站切換成暗色模式。如果你的網站也需要加入深色主題功能，可以參考 Darkmode.Js 這類工具來快速實作。

透過 npm 安裝

對於前端開發者來說，透過 npm 或 yarn 安裝是最方便的方式：

npm install @radix-ui/react-icons

或者使用 yarn：

yarn add @radix-ui/react-icons

安裝完成後，每個圖標都是一個獨立的 React 元件，可以透過具名匯入（Named Import）的方式引入。這種設計讓打包工具（如 Webpack、Vite）能夠進行 Tree-shaking，只將你實際使用到的圖標打包進最終產物，大幅減少包體積。如果你需要對 SVG 進一步壓縮，可以搭配 SVGOMG 這類工具來最佳化檔案大小。

從 GitHub 取得原始碼

所有圖標的 SVG 原始檔案都可以在 GitHub 儲存庫 中找到。如果你需要修改圖標的設計細節（例如調整圓角、線條粗細或圖標結構），可以直接從原始碼著手。修改後的圖標一樣可以在 MIT License 的框架下自由使用。如果你需要大量客製化圖標，也可以參考 SVG Repo 上豐富的 SVG 資源作為補充。

在 React 專案中使用 Radix Icons

Radix Icons 的最大優勢之一就是原生 React 元件支援。不像某些圖標庫只提供 SVG 檔案，你需要手動包裝成元件，Radix Icons 已經幫你做好了這一步。

基本引入方式與 Tree-shaking 最佳實踐

安裝套件後，使用具名匯入的方式引入需要的圖標元件：

import { ArrowLeftIcon, CheckIcon, TrashIcon } from '@radix-ui/react-icons';

function App() {
  return (
    <div>
      <ArrowLeftIcon />
      <CheckIcon />
      <TrashIcon />
    </div>
  );
}

注意不要使用 import * as Icons 這種整包匯入的方式，這會讓打包工具無法進行 Tree-shaking，導致所有 300+ 個圖標都被打包進去。使用具名匯入可以確保只有你實際引用的圖標會出現在最終的 JavaScript 包中。如果你的專案使用了 Google Fonts 等 Web 字型資源，同樣需要注意只載入需要使用的字型子集來控制頁面載入量。

自訂圖標尺寸與顏色

Radix Icons 的每個元件都接受標準的 SVG 屬性，你可以透過 props 來控制尺寸和樣式：

// 設定尺寸
<ArrowLeftIcon width={24} height={24} />

// 透過 CSS class 設定顏色
<CheckIcon className="text-blue-500" />

// 透過 inline style 設定顏色
<TrashIcon style={{ color: 'red' }} />

雖然圖標的設計基於 15×15 的網格，但你可以將它放大到任意尺寸而不會失真，因為 SVG 是向量格式。不過要注意，放大超過 24×24 時，15×15 網格的設計可能會在視覺上顯得過於精簡，細節不夠豐富。如果你的專案需要大尺寸圖標，可以考慮使用 LineIcons 或其他基於 24×24 網格設計的圖標庫。

與 Radix UI 元件搭配使用

Radix Icons 最理想的搭配對象就是 Radix UI 的元件庫。以下是一個使用 Radix UI Dropdown Menu 搭配圖標的範例：

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { HamburgerMenuIcon, Pencil1Icon, TrashIcon } from '@radix-ui/react-icons';

function Menu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <HamburgerMenuIcon width={20} height={20} />
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <Pencil1Icon /> 編輯
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <TrashIcon /> 刪除
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

在 Next.js App Router 中使用時，如果遇到「Client Component」的錯誤提示，只需在使用圖標的元件檔案頂端加上 use client 指令即可。Radix Icons 的元件依賴瀏覽器環境渲染 SVG，因此在 Server Component 中無法直接使用。如果你遇到 Cloudflare Workers 等 Edge Runtime 環境，也需要注意類似的相容性問題。

在 Figma 與 Sketch 中使用

對於設計師來說，Radix Icons 在 Figma 和 Sketch 中的整合體驗相當成熟。

在 Figma 中，前往 Figma Community 搜尋「Radix Icons」，找到官方提供的檔案後點擊「Open in Figma」或「Duplicate to your drafts」，即可將全部圖標複製到你的專案中。匯入後，每個圖標都是獨立的元件（Component），你可以像使用 Clay Mockups 等設計資源一樣，直接從 Assets 面板拖曳圖標到畫布上。

在 Sketch 中，下載 .sketch 格式的圖標包後，可以將它作為符號庫（Symbol Library）使用。在 Sketch 的偏好設定中將這個檔案加入為共享庫，之後在任何 Sketch 文件中都可以透過「Insert Symbol」功能快速插入 Radix 圖標。這種工作流程和 Free Deca UI Kit 等 UI 設計資源的使用方式一致。

官方網站也提供了一個便利的圖標選用介面，透過搜尋框快速找到需要的圖標，單擊後自動複製 SVG 程式碼。這對於需要將圖標貼到 UI Design Daily 等設計資源中使用的設計師來說非常方便。

在 WordPress 網站中使用 Radix Icons

雖然 Radix Icons 主要是為 React 開發者設計的，但 WordPress 使用者也完全可以在網站中使用這套圖標。以下介紹三種整合方式。

方法一：直接內嵌 SVG 程式碼

最簡單的方式是直接將 Radix Icons 的 SVG 程式碼貼到 WordPress 的「自訂 HTML」區塊中。前往官方網站，點擊你需要的圖標，SVG 程式碼就會自動複製到剪貼簿。然後在 WordPress 編輯器中新增一個「自訂 HTML」區塊，貼上程式碼即可。你可以透過修改 SVG 標籤的 width、height 和 fill 屬性來調整尺寸和顏色。

這種方式適合只需要少量圖標的場景。如果你的網站託管在 Bluehost 等優質主機上，直接內嵌 SVG 不會對載入速度造成太大影響，因為 SVG 本身是非常輕量的向量格式。不過，如果需要在多個頁面重複使用相同的圖標，建議改用方法二或方法三來統一管理。

方法二：透過佈景主題 functions.php 註冊 SVG 支援

WordPress 預設不允許上傳 SVG 檔案（基於安全考量）。如果你希望將 SVG 檔案上傳到 WordPress 媒體庫中，可以在佈景主題的 functions.php 檔案中加入以下程式碼：

function allow_svg_upload($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

啟用後，你就可以從 Radix Icons 官方網站 下載完整的 SVG 檔案包，然後將需要的圖標逐一上傳到 WordPress 媒體庫。這種方式比方法一更有系統性，方便在多篇文章中重複引用同一個圖標。為了確保上傳的 SVG 不會拖慢網站速度，建議搭配 ShortPixel 或 Imagify 等圖片壓縮外掛來最佳化檔案大小。

方法三：使用 SVG Support 外掛

如果你不想修改程式碼，可以直接安裝「SVG Support」這類 WordPress 外掛來啟用 SVG 功能。安裝啟用後，WordPress 媒體庫就會自動接受 SVG 格式的上傳。你可以將 Radix Icons 的 SVG 檔案上傳後，像使用一般圖片一樣在文章或頁面中插入。這是最適合非技術背景使用者的方式。

不管你選擇哪種方式，都建議關注網站效能。過多的 inline SVG 會增加 HTML 文件大小，影響 WordPress 網站速度。如果你的網站使用 SiteGround SG Optimizer 或其他快取外掛，確保 SVG 資源有被正確快取。你也可以參考 WebP 圖片格式 的設定教學，了解如何在 WordPress 中最佳化圖片資源的載入效能。對於更進階的效能調校，啟用 GZIP 壓縮 可以進一步減少 SVG 檔案的傳輸大小。

在選擇 WordPress 託管環境時，主機的回應速度對於 SVG 等靜態資源的載入表現有直接影響。如果你正在尋找適合的 WordPress 主機方案，可以參考我們的 WordPress 虛擬主機推薦懶人包，裡面詳細比較了 17 款熱門主機的費用、速度和功能差異。

Radix Icons 與其他免費開源圖標庫的比較

市面上的免費開源圖標庫非常多，每套都有自己的特色和適用場景。以下將 Radix Icons 與幾個主流圖標庫進行比較，幫助你根據專案需求做出選擇。

Radix Icons 在圖標數量上不是最多的，但它的 15×15 設計尺寸和原生 React 元件支援是獨特的競爭優勢。如果你需要的是一套精煉、統一且適合 UI 元件層級的圖標，Radix Icons 是最理想的選擇。如果需要更豐富的數量和分類，Remix Icon 或 Ionicons 會更適合。

從授權角度來看，大多數圖標庫都採用 MIT License，包括 Radix Icons、Heroicons、Octicons 和 Tabler Icons。MIT License 是最寬鬆的開源授權之一，商用完全沒有問題。Remix Icon 採用 Apache 2.0 授權，同樣允許商用，但要求保留授權聲明。Simple Icons 採用 CC0（公眾領域）授權，使用上最為自由。

在設計風格方面，iconmonstr 提供了 4000+ 的單色圖標，採用 CC0 授權。如果你需要特定領域的圖標（如品牌 Logo），Simple Icons 是不二之選。選擇圖標庫時，建議優先考慮設計一致性，再考慮數量。過多風格不一致的圖標反而會降低 UI 的整體品質。

SVG 圖標效能最佳化

在使用任何 SVG 圖標庫時，效能最佳化都是不可忽視的環節。未經處理的 SVG 檔案可能包含編輯器留下的多餘資訊（如 metadata、空白字元、無用屬性），這些都會增加檔案大小並影響網頁載入速度。

Tree-shaking 是現代前端打包工具（Webpack、Vite、Rollup）提供的關鍵功能。它的原理是靜態分析你的程式碼，找出哪些匯出的模組從未被使用，然後在最終的打包產物中移除它們。以 Radix Icons 為例，如果你只使用了 5 個圖標，但圖標庫總共有 300 個，Tree-shaking 會確保打包結果只包含那 5 個圖標的 SVG 資料。這就是為什麼使用具名匯入這麼重要。

對於 SVG 檔案本身的壓縮，可以使用 SVGO（SVG Optimizer）這類工具。SVGO 能夠移除 SVG 中的多餘屬性、精簡路徑數據、合併相同樣式，通常可以將 SVG 檔案大小壓縮 20% 到 50%。你可以透過 SVGOMG 這個線上工具來體驗 SVGO 的壓縮效果，或者使用 Compressor.io 等通用圖片壓縮工具。如果你希望進一步了解網站速度的最佳化策略，可以參考 網站速度測試分析與最佳化指南 和 網站頁面載入速度對 Google SEO 排名的影響 這兩篇文章。

在載入策略方面，小型 SVG 圖標通常建議使用 inline SVG（直接內嵌在 HTML 中）來避免額外的 HTTP 請求。但如果圖標數量很多（超過 20 個），可以考慮使用 SVG Sprite 或 CSS background-image 的方式來最佳化。你可以使用 GiftofSpeed 或 Fast or Slow 等工具來測試不同載入策略的實際效能差異。如果需要在載入前進一步壓縮圖片資源，Squoosh 是 Google 推出的免費跨平台壓縮工具，值得一試。

MIT 授權條款解析：Radix Icons 的商用指南

Radix Icons 採用的 MIT License 是開源界最廣泛使用的授權條款之一，也是條件最寬鬆的授權之一。MIT License 允許你做以下所有事情：

• 在商業專案中免費使用（包括 SaaS 產品、付費 App 等）
• 修改圖標的設計或程式碼
• 將修改後的版本重新分發
• 將圖標整合到你的開源或閉源專案中
• 將圖標用於客戶專案（接案、外包等場景）

MIT License 唯一的要求是：在你的專案中保留原始的版權聲明和授權條款文字。實務上，這通常意味著在你的專案的 LICENSE 檔案或第三方聲明檔案中，加入一段類似「This software includes Radix Icons, licensed under the MIT License」的文字即可。這比 CC Search 上某些需要署名的 CC BY 授權資源要簡單得多。

如果你正在尋找更多免費可商用的設計資源，除了圖標之外，免費圖庫懶人包 收錄了 47 個可商用的無版權圖片資源。Pexels、Pixabay 和 Unsplash 也是非常優質的免費圖片來源。至於更多免費圖標資源，可以參考 FreeImages 和 Emblemicons 等網站。

適合誰？不適合誰？

Radix Icons 不是萬用圖標庫，選擇之前先確認你的需求是否吻合。

適合使用的情境：

• 你的專案基於 Radix UI 或 shadcn/ui 建構，需要風格一致的圖標
• 你需要一套精煉、小巧、視覺統一的 UI 圖標，用在工具列、表格、表單等緊湊場景
• 你的 React 專案需要 Tree-shakeable 的元件化圖標方案
• 你偏好 MIT License 的寬鬆商用授權

不適合使用的情境：

• 你需要 1000+ 的大型圖標庫，涵蓋各種場景（建議改用 Remix Icon）
• 你的專案需要大尺寸圖標（48×48 以上），15×15 的設計會顯得過於精簡
• 你使用的是 Vue、Svelte 等非 React 框架，且不希望手動處理 SVG（建議改用 Feather Icons）
• 你需要品牌 Logo 圖標（建議改用 Simple Icons）

三個下一步：立刻開始使用 Radix Icons

1. 前往官方網站瀏覽圖標：到 Radix Icons 官方網站 瀏覽全部圖標，點擊即可複製 SVG 程式碼。判斷標準：如果你的 UI 需要在小空間內使用圖標（例如表格操作按鈕、下拉選單項目），Radix Icons 的 15×15 設計尺寸非常適合。預期結果：5 分鐘內取得需要的 SVG 程式碼。
2. 在 React 專案中安裝 npm 套件：執行 npm install @radix-ui/react-icons，然後使用具名匯入引入圖標。判斷標準：確認打包工具支援 Tree-shaking（Webpack 5+ 或 Vite 預設支援）。預期結果：只有你使用的圖標會被打包進最終產物。
3. 下載 Figma 或 Sketch 檔案：如果你是設計師，從官方網站下載對應格式的檔案，匯入到設計工具中作為元件庫使用。判斷標準：匯入後每個圖標應該是獨立的 Component，可以直接從 Assets 面板拖曳使用。預期結果：設計稿和開發產出的圖標風格完全一致。

Radix Icons 常見問題 FAQ

Radix Icons 是免費的嗎？

是的，Radix Icons 完全免費。所有圖標以 MIT License 開源於 GitHub 上，你可以在任何商業或個人專案中免費使用，無須支付任何費用。

Radix Icons 有多少個圖標？

截至 2026 年 5 月，Radix Icons 收錄超過 300 個圖標，涵蓋 UI 設計中最常用的場景，包括導航箭頭、操作按鈕、表單元素、狀態指示、社交品牌和排版工具等分類。數量雖然不及 Remix Icon 等大型圖標庫，但每個圖標都經過精心設計，品質非常高。

可以在商業專案中使用 Radix Icons 嗎？

可以。Radix Icons 採用 MIT License 授權，你可以在商業產品、SaaS 服務、付費 App、客戶專案等任何場景中免費使用。唯一的要求是在你的專案中保留原始的版權聲明和授權條款文字。

如何修改 Radix Icons 的顏色和大小？

在 React 中，你可以透過 width 和 height props 來調整圖標尺寸，透過 CSS class 或 inline style 來設定顏色。在 SVG 原始檔案中，你可以直接修改 width、height 和 fill 屬性。因為 SVG 是向量格式，放大不會失真。

Radix Icons 支援哪些設計工具？

Radix Icons 提供 Figma、Sketch、IconJar 和 SVG 四種格式的完整下載包。Figma 使用者可以從 Figma Community 直接匯入，Sketch 使用者可以下載 .sketch 檔案作為符號庫，SVG 格式則通用於所有設計工具和開發環境。在跨工具支援方面，Icons8 和 Animated icons by Icons8 也提供了類似的豐富圖標資源。